/* eslint-disable no-unused-vars */
let img = document.querySelector('.img');
let change = document.querySelector('.change');
let all = document.querySelector('.all');
let point = []; //图片下方的圆点集合
let index = 1; //需要控制的值
let lastIndex = 1; //上一次操作的值
for (let i = 0; i < img.children.length; i++) {
    //自动生成圆点
    point[i] = document.createElement('div');
    point[i].className = 'point';
    point[i].dataset.i = i;
    change.appendChild(point[i]);
}
point[0].style['background-color'] = 'black';
function f() {
    //圆点样式随图片的变动而变动
    point.forEach((e, i) => {
        if (i != index - 1) e.style['background-color'] = 'white';
    });
    point[index - 1].style['background-color'] = 'black';
}
//克隆第一张和最后一张（为了无缝切换）
img.insertBefore(
    img.lastElementChild.cloneNode(true),
    img.firstElementChild
);
img.appendChild(img.children[1].cloneNode(true));
//位置移动到第2张
img.style.transform = 'translate(-100%)';
//加载js时会出现过渡效果，先移动，再恢复
setTimeout(() => {
    img.style.transition = 'transform 0.5s';
}, 100);
all.addEventListener('click', (e) => {
    //事件代理
    if (e.target.className === 'point') {
        //点击圆点///////////
        let p = e.target.dataset.i; //字符串
        img.style.transform = `translate(-${+p + 1}00%)`;
        point.forEach((e, i) => {
            if (i != p) e.style['background-color'] = 'white';
        });
        point[p].style['background-color'] = 'black';
        index = +p + 1;
    }
    if (
        e.target.className === 'left' ||
        e.target.className === 'p-left'
    ) {
        //点击左箭头
        img.style.transform = 'translate(-' + --index + '00%)';
        //达到最后一张，跳转到第二张
        if (index < 1) {
            index = img.children.length - 2;
            //等待过渡动画结束
            img.addEventListener(
                'transitionend',
                () => {
                    //关闭过渡效果
                    img.style.transition = 'none';
                    img.style.transform =
                        'translate(-' + index + '00%)';
                    //更新元素的新样式
                    window.getComputedStyle(img).transform;
                    img.style.transition = 'transform 0.8s';
                },
                { once: true }
            ); //只绑定一次
        }
        f();
    }
    if (
        e.target.className === 'right' ||
        e.target.className === 'p-right'
    ) {
        //点击右箭头
        img.style.transform = `translateX(-${++index}00%)`;
        //达到最后一张，跳转到第二张
        if (index > img.children.length - 2) {
            index = 1;
            //等待过渡动画结束
            img.addEventListener(
                'transitionend',
                () => {
                    //关闭过渡效果
                    img.style.transition = 'none';
                    img.style.transform = 'translate(-100%)';
                    //更新元素的新样式
                    window.getComputedStyle(img).transform;
                    img.style.transition = 'transform 0.8s';
                },
                { once: true }
            ); //只绑定一次
        }
        f();
    }
});
let timer;
function f1() {
    timer = setInterval(() => {
        //自动轮播///////////////////////////////////////
        img.style.transform = `translateX(-${++index}00%)`;
        //达到最后一张，跳转到第二张
        if (index > img.children.length - 2) {
            index = 1;
            //等待过渡动画结束
            img.addEventListener(
                'transitionend',
                () => {
                    //关闭过渡效果
                    img.style.transition = 'none';
                    img.style.transform = 'translate(-100%)';
                    //更新元素的新样式
                    window.getComputedStyle(img).transform;
                    img.style.transition = 'transform 0.8s';
                },
                { once: true }
            ); //只绑定一次
        }
        f();
    }, 1500);
}
f1();
all.addEventListener('mouseenter', () => {
    //移入停止轮播
    clearInterval(timer);
});
all.addEventListener('mouseleave', () => {
    //移出继续自动轮播
    f1();
});
document.addEventListener('visibilitychange', () => {
    //界面不显示时不轮播
    if (document.hidden) clearInterval(timer); //判断网页是否被隐藏
    else {
        clearInterval(timer);
        f1();
    }
});